<template>
  <div class="employees" style="padding: 10px; background: #f6f6f6">
    <a-card :bordered="true">
      <div class="header">
        <div class="header_log">
          <info-circle-filled style="color: #409eff" />
          共20条记录
        </div>
        <div class="header_excel">
          <a-button type="primary" style="background-color: #f56c6c"
            >普通excel导出</a-button
          >
          <a-button type="primary" style="background-color: #909399"
            >复杂表头excel导出</a-button
          >
          <a-button type="primary" style="background-color: #67c23a"
            >excel导入</a-button
          >
          <a-button type="primary">新增员工</a-button>
        </div>
      </div>
    </a-card>
    <a-card :bordered="true">
      <div class="main">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          bordered
          :pagination="false"
          :scroll="{ x: 900 }"
        >
          <!-- 
          三个大的插槽:#headerCell、#bodyCell、#fooderCell,对应表格三个部分
          作用域插槽四个参数: 
            column(表头的数组)、record(当前行的数据)、text(当前单元格数据)、index(当前行下标)
          怎么选中当前列一排的单元格:
            v-if="column.key(dataIndex)=== 当前表头列的key(dataIndex)"
         -->
          <template #bodyCell="{ column, index, text }">
            <template v-if="column.key === 'index'">
              <div class="index">
                {{ (page - 1) * size + index + 1 }}
              </div>
            </template>
            <template v-if="column.key === 'staffPhoto'">
              <img :src="text" alt="" width="40" />
            </template>
            <template v-if="column.key === 'handle'">
              <div class="btn">
                <a-button type="link">查看</a-button>
                <a-button type="link">转正</a-button>
                <a-button type="link">调岗</a-button>
                <a-button type="link">离职</a-button>
                <a-button type="link">角色</a-button>
              </div>
            </template>
          </template>
        </a-table>
        <a-pagination
          v-model:current="page"
          v-model:pageSize="size"
          :page-size-options="['1', '5', '10', '20', '30']"
          :total="total"
          @change="onChange"
          :show-total="() => `共 ${total} 条`"
          show-quick-jumper
          showSizeChanger
        />
      </div>
    </a-card>
  </div>
</template>
<script lang="ts">
import { ref, toRefs, reactive } from 'vue'
import { sysUser } from '@/api/employees'
import { pageType } from '@/api/apiType'
interface Ipage {
  page: number
  size: number
  total: number
}
export default {
  name: 'employees',
  setup() {
    let dataSource = ref()
    const paginationData = reactive<Ipage>({
      page: 1,
      size: 1,
      total: 80
    })
    function onChange(page: number, size: number) {
      getList({ page, size })
    }
    function showTotal() {
      return `共 ${paginationData.total} 条`
    }
    async function getList(page: pageType) {
      const res = await sysUser({
        page: page.page,
        size: page.size
      })
      console.log(res)
      dataSource.value = res.data.rows
      paginationData.total = res.data.total
      console.log(paginationData.total)
    }
    getList({ page: paginationData.page, size: paginationData.size })
    return {
      ...toRefs(paginationData),
      showTotal,
      onChange,
      // 表体的数据,数组的一个下标对象是一行的数据
      //
      dataSource,
      // 表头的数据,数组的一个下标对象是一列的数据
      // title: 当前列的表体
      // dataIndex: 当前列对应的data数据对象的属性名
      // key: 当前列的标识,常用于在插槽选中当前列
      columns: [
        {
          title: '序号',
          dataInedx: 'index',
          key: 'index',
          width: 63
        },
        {
          title: '姓名',
          dataIndex: 'username',
          key: 'username',
          width: 76,
          customCell: () => {
            return {
              style: {
                'min-width': '76px'
              }
            }
          }
        },
        {
          title: '头像',
          dataIndex: 'staffPhoto',
          key: 'staffPhoto',
          width: 63
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          width: 100,
          maxWidth: 100
        },
        {
          title: '工号',
          dataIndex: 'workNumber',
          key: 'workNumber',
          width: 63
        },
        {
          title: '聘用形式',
          dataIndex: 'formOfEmployment',
          key: 'formOfEmployment',
          width: 90
        },
        {
          title: '部门',
          dataIndex: 'departmentName',
          key: 'departmentName',
          width: 76,
          customCell: () => {
            return {
              style: {
                'min-width': '76px'
              }
            }
          }
        },
        {
          title: '入职时间',
          dataIndex: 'timeOfEntry',
          key: 'timeOfEntry',
          width: 90,
          minWidth: 90
        },
        {
          title: '状态',
          dataIndex: 'enableState',
          key: 'enableState',
          width: 63
        },
        {
          title: '操作',
          dataIndex: 'handle',
          key: 'handle',
          width: 270,
          minWidth: 270,
          maxWidth: 271,
          customCell: () => {
            return {
              style: {
                'min-width': '200px',
                padding: '0px'
              }
            }
          }
        }
      ]
    }
  }
}
</script>
<style scoped lang="less">
.employees {
  .ant-card {
    background-color: none;

    :deep(.ant-card-body) {
      padding: 10px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_log {
          padding: 4px 8px;
          font-size: 17px;
          background-color: #e6f7ff;
          border: 1px solid #91d5ff;
          border-radius: 4px;
        }

        &_excel {
          button {
            padding: 0 20px;
            margin-left: 8px;
            height: 38px;
            border: none;
            border-radius: 4px;
          }
        }
      }
    }
  }

  .ant-btn {
    padding: 4px 5px;
  }

  .ant-pagination {
    float: right;
  }
}
</style>
